<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 290px;
            height: 240px;
            margin: 30px;
            /*水平  垂直  阴影的模糊程度  颜色*/
            box-shadow: 10px 10px 50px  black;
            border-image:url("img/7.jpg") 50 50 round;
        }

        .one{
            background: rgba(255,0,0, 1.0);
        }
        .two{
            background: rgba(255,0,0, 0.8);
        }
        .three{
            background: rgba(255,0,0, 0.6);
        }
        .four{
            background: rgba(255,0,0, 0.4);
        }
        .five{
            background: rgba(255,0,0, 0.2);
        }

        p{
          width: 400px;
          height: 150px;
          font-size: 60px;
          color: red;
          text-shadow: 2px 2px 5px black;
        }

        span{
            display: inline-block;
            width: 200px;
            height: 100px;
            background: red;
        }

        span:hover{
           -webkit-transform-origin: bottom center;
           transform:scale(1.9);
        }
    </style>
</head>
<body>
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
   <div class="five">5</div>

   <p>大神一期</p>

   <span>12121</span>

</body>
</html>